<template>
	<view class="container">
		<view class="topinfo">
			<view class="left">
				<image class="cover" :src="data.cover"></image>
			</view>
			<view class="right">
				<view class="name">{{data.name}}</view>
				<view class="price">¥{{data.price}}/次</view>
			</view>
		</view><!-- 轮播图 end -->
		<view class="info_container">
			<view class="intro_bg">
				<view class="ib_left">
					购买数量
				</view>
				<view class="ib_right">
					<image v-if="num > 1" @click="minus()" class="icon" src="../../../static/images/minus-1.png"></image>
					<image v-else class="icon" src="../../../static/images/minus-0.png"></image>
					<view class="num">
						{{num}}
					</view>
					<image @click="push()" class="icon" src="../../../static/images/push.png"></image>
				</view>
			</view><!-- intro_bg end-->
		</view><!--info-->
		<view class="footer">
			<view class="price">¥{{total}}元</view>
			<view class="buy" @click="goBuy()">提交订单</view>
		</view>
	</view>
</template>

<script>
	import {toLogin} from "@/libs/login.js";
	import {mapGetters} from "vuex";
	import {getProductDetail,orderConfirm} from "@/api/product.js";
	import parser from "@/components/jyf-parser/jyf-parser";
	
	// #ifdef MP
	import authorize from "@/components/Authorize";
	// #endif
	export default {
		components: {
			parser,
			// #ifdef MP
			authorize,
			// #endif
		},
		data() {
			return {
				data:{
					price:0.0,
					name:'',
				},
				num:1,
				total:0.00,
				id:0
			}
		},
		computed: mapGetters(["isLogin"]),
		watch: {
			isLogin: {
				handler: function(newV, oldV) {
					if (newV == true) {
						console.info(111)
						// this.getCouponList();
						// this.getCartCount();
						// this.downloadFilePromotionCode();
					}
				},
				deep: true,
			}
		},
		onLoad(options) {
			this.id = options.id;
			this.getData();
		},
		methods: {
			getData(){
				let that = this;
				uni.showLoading({
					title:'加载中...'
				});
				getProductDetail(this.id).then((res) => {
					let data = res.data;
					that.data = data;
					that.imgUrls = data.imgs.split(',');
					that.know = data.know;
					that.content = data.content;
					that.total = that.num * data.price;
					that.total = that.total.toFixed(2); 
					uni.hideLoading();
				});
			},
			goBuy(){
				if (this.isLogin === false) {
					toLogin();
				} else {
					console.info('已登录')
					//提交订单
					
					let that = this;
					uni.showLoading({
						title:'提交中...'
					});
					orderConfirm(this.id,this.num).then((res) => {
						let data = res.data;
						let result = 0;
						if(data.id > 0){
							result = 1;
						}
						uni.navigateTo({
							url:'/pages/news/order/result?result='+result
						})
						uni.hideLoading();
					}).catch((err) => {
						// that.isOpen = false;
						return that.$util.Tips({
							title: err,
						});
					});;
					
					
				}
			},
			minus(){
				if(this.num > 1){
					this.num = this.num-1;
					let total = this.num * this.data.price;
					this.total = total.toFixed(2); 
				}
			},
			push(){
				if(this.num+1 < 100){
					this.num = this.num+1;
					let total = this.num * this.data.price;
					this.total = total.toFixed(2); 
				}else{
					uni.showToast({
						title:'不能大于100'
					});
				}
			}
		}
	}
</script>

<style lang="scss" scope>
	.container {
		background-color: #F5F5F5;
		padding-bottom: 0;
		padding-bottom: constant(safe-area-inset-bottom);  
		padding-bottom: env(safe-area-inset-bottom); 
	}
	.topinfo{
		display: flex;
		flex-direction: row;
		background-color: white;
		padding: 30rpx;
		margin-top: 10rpx;
		.left{
			.cover{
				width: 260rpx;
				height: 160rpx;
			}
		}
		.right{
			margin-left: 20rpx;
			.name{
				font-size: 30rpx;
				font-weight: bold;
				color: black;
			}
			.price{
				margin-top: 30rpx;
				font-size: 26rpx;
				color: red;
			}
		}
	}
	
	.info_container{
		display: flex;
		flex-direction: column;
		background-color: white;
		// margin-bottom: calc(100rpx+ constant(safe-area-inset-bottom));
		// margin-bottom: calc(100rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
		// margin-bottom: calc(100rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
		// padding: 20rpx;
			margin-top: 10rpx;
		
		.intro_bg{
			display: flex;
			flex-direction: row;
			justify-content: space-between;	
			align-items: center;
			padding: 30rpx;
			
			.ib_left{
				font-size: 30rpx;
				font-weight: bold;
				color: black;
			}
			.ib_right{
				display: flex;
				flex-direction: row;
				align-items: center;
				.icon{
					width:70rpx;
					height:70rpx;
				}
				.num{
					color: black;
					font-size: 28rpx;
					font-weight: bold;
					width: 40rpx;
					text-align: center;
				}
			}
		}
	}
	.footer {
		padding: 0 20rpx 0 30rpx;
		position: fixed;
		bottom: 0;
		width: 100%;
		box-sizing: border-box;
		background-color: #fff;
		z-index: 277;
		border-top: 1rpx solid #f0f0f0;
		height: 100rpx;
		height: calc(100rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
		height: calc(100rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		.price{
			color: red;
			font-size: 36rpx;
			font-weight: bold;
			height: 100rpx;
			line-height: 100rpx;
		}
		.buy{
			margin-top: 20rpx;
			width: 200rpx;
			height: 60rpx;
			border-radius: 30rpx;
			background-color: red;
			color: white;
			font-size: 28rpx;
			text-align: center;
			line-height: 60rpx;
		}
	}
</style>
